<template>
  <div class="common-body-wrapper">
    <search-header
      single-width="120"
      :searchList="searchList"
      @changeHeight="toRetTable"
      @confirmSearch="toSearch"
    ></search-header>
    <multi-fun-table
      :sortColumn="notFormatColumn"
      :orderType="sortType"
      :fixed-cols="fixedCols"
      :is-reset-table="isResetTable"
      :theads-info="theadsInfo"
      :tbodys-info="tbodysInfo"
      @handleMultiCheck="handleMultiCheck"
      @handleSortColumn="handleSortColumn"
      @searchFn="getList"
      @getNextPage="getNextPage"
    >
      <div class="operate-btn-group" slot="operateBtnGroup">
        <a
          class="ake_btn ake_btn_text"
          v-if="isPermmited('TRADER_COUPON:TRADERSUGGEST:EXPORT')"
          @click.prevent="exportData()"
        >导出</a>
      </div>
      <template slot="tdCell" slot-scope="props">
        <el-table-column
          :fixed="props.fixed"
          :label="props.label"
          :min-width="props.minWidth"
          :width="props.width"
          :prop="props.prop"
          :sortable="props.sortable"
        >
          <template slot-scope="scope">
            <span v-if="'reno' == props.prop">{{scope.$index+1}}</span>
            <span v-else-if="'content' == props.prop">
              <a class="imgLink" @click="showContent(scope.row['content'])">查看</a>
            </span>
            <span v-else>{{ scope.row[props.prop] }}</span>
          </template>
        </el-table-column>
      </template>
      <template slot="operateCell" slot-scope="props">
        <el-table-column :fixed="props.fixed" :label="props.label" min-width="60">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              class="ake_btn ake_font_btn ake_btn_red"
              icon="el-icon-delete"
              v-if="isPermmited('TRADER_COUPON:TRADERSUGGEST:DEL')"
              @click.prevent="showDialog('是否删除？', ['确认','取消'],function(){function_comfirm('DT',scope.row['id'])})"
            ></el-button>
          </template>
        </el-table-column>
      </template>
    </multi-fun-table>

    <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
    <big-pic-modal ref="bigPicModal">
      <img
        slot="bigImgSlot"
        :src="bigImgPath | setImgPath"
        alt
        @error="imgError('../../', 'car', $event)"
      />
    </big-pic-modal>
    <!--查看投诉内容-->
    <basic-modal ref="contentModal" width="400" customeClass="select-park-modal" static="true">
      <h3 slot="title">反馈内容</h3>
      <div class="modal-body" slot="modal-body">
        <el-input type="textarea" :rows="8" placeholder="请输入内容" v-model="contentData" disabled></el-input>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <!-- <button class="ake_btn ake_btn_text modal-close" @click="closed('contentModal')">取消</button> -->
        <button
          type="button"
          class="ake_btn ake_btn_text ake_btn_confirm"
          @click="closed('contentModal')"
        >确认</button>
      </div>
    </basic-modal>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
import BigPicModal from "@components/widgets/BigPicModal.vue";

// image
import images from "@mixins/image.js";

// 引进vue的js
import suggest from "./js/suggest.js";
export default {
  mixins: [common, stardardList, invokeModal, images, suggest],
  components: {
    BigPicModal
  },
  data() {
    return {
      fixedCols: 2,
      total: 0,
      contentData: "",
      //prop-返回数据的字段名称   proisNotInter:true,pNameisNotInter:true,，name-查询字段传参名称    text-显示名称  //initHidden  初始化不显示
      searchList: [
        {
          type: "text",
          isShow: false,
          name: "name",
          text: "反馈人姓名",
          value: ""
        },
        {
          type: "text",
          isShow: false,
          name: "tel",
          text: "反馈人电话",
          value: ""
        },

        {
          type: "datePicker",
          isShow: false,
          name: "query_time",
          text: "反馈时间",
          propName: "validFrom,validTo",
          value: "",
          style: { width: "360px" }
        }
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: "reno", text: "序号", width: 64 },
        {
          index: 1,
          isShow: false,
          prop: "content",
          text: "反馈内容",
          sortable: false,
          Width: 180
        },
        {
          index: 2,
          isShow: false,
          prop: "name",
          text: "反馈者姓名",
          sortable: false,
          minWidth: 110
        },
        {
          index: 3,
          isShow: false,
          prop: "tel",
          text: "反馈者电话",
          sortable: false,
          minWidth: 140
        },
        {
          index: 4,
          isShow: false,
          prop: "create_time",
          text: "反馈时间",
          sortable: false,
          minWidth: 180
        }
      ],
      tbodysInfo: []
    };
  },
  methods: {
    confirmSearch(params) {
      this.getList();
    }
  }
};
</script>

<style lang="less" scoped>
</style>